<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Test Table - Fancytree</title>

	<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<style type="text/css">
	/* Set alternating row colors (define BEFORE standard css). */
/*
	table.fancytree-ext-table tbody tr:nth-child(even){
		background-color: #f4f4f8;
	}
*/
	/* custom alignment (set by 'renderColumns'' event) */
	td.alignRight {
	   text-align: right;
	}
	td input[type=input] {
		width: 40px;
	}
</style>
	<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
	<script src="../src/jquery.fancytree.js"></script>
	<script src="../src/jquery.fancytree.filter.js"></script>
	<script src="../src/jquery.fancytree.table.js"></script>
	<script src="../src/jquery.fancytree.gridnav.js"></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="../lib/prettify.css" rel="stylesheet">
	<script src="../lib/prettify.js"></script>
	<link href="../demo/sample.css" rel="stylesheet">
	<script src="../demo/sample.js"></script>
	<!-- End_Exclude -->

<script type="text/javascript">
SOURCE = [
	{title: "node 1", folder: true, expanded: true, children: [
		{title: "node 1.1"},
		{title: "node 1.2"},
		{title: "node 1.3"}
	 ]},
	{title: "node 2", folder: true, expanded: true, children: [
		{title: "node 2.1"},
		{title: "node 2.2"},
		{title: "node 2.3"}
	 ]},
	{title: "node 3", folder: true, children: [
		{title: "node 3.1 <input type='input' value=''>"},
		{title: "node 3.2"},
		{title: "node 3.3"}
	 ]}
];
	$(function(){
		// Attach the fancytree widget to an existing <div id="tree"> element
		// and pass the tree options as an argument to the fancytree() function:
		$("#tree").fancytree({
			extensions: ["table", "filter", "gridnav"],
			checkbox: true,
			filter: {
				// mode: "hide"
			},
			gridnav: {
				// autofocusInput: true, // focus first embedded input if node gets activated
				// handleCursorKeys: true,   // Allow UP/DOWN in inputs to move to prev/next node
			},
			table: {
				indentation: 20,      // indent 20px per node level
				nodeColumnIdx: 2,     // render the node title into the 3rd column
				checkboxColumnIdx: 1  // render the checkboxes into the 2nd column
			},
			// source: {
			// 	url: "../demo/ajax-tree-plain.json"
			// },
			// source: [{title: "1", folder: true}],
			source: {foo: "bar", children: SOURCE},
			titlesTabbable: true,     // Add all node titles to TAB chain
			init: function(event, data) {
				// alert("init: " + data.tree.data.foo);
			},
			lazyLoad: function(event, data) {
				data.result = {url: "../demo/ajax-sub2.json"};
			},
			renderColumns: function(event, data) {
				var node = data.node,
					$tdList = $(node.tr).find(">td");
				$tdList.eq(0).text(node.getIndexHier()).addClass("alignRight");
				// (index #1 is rendered by fancytree by adding the checkbox)
				// (index #2 is rendered by fancytree)
				if( node.isFolder() ) {
					$tdList.eq(2)
						.prop("colspan", 5)
						.nextAll().remove();
				}
				// $tdList.eq(3).text(node.key);
				$tdList.eq(3).html("<input type='input' name='col1' value='" + node.key + "'>");
				$tdList.eq(4).html("<input type='input' name='col2' value='" + node.key + "'>");
				$tdList.eq(5).html("<input type='checkbox' name='rb1' value='" + node.key + "'>");
				$tdList.eq(6).html("<input type='checkbox' name='rb2' value='" + node.key + "'>");
			}
		});
		/* Handle custom checkbox clicks */
		$("#tree").on("click", "input[name=like]", function(e){
			var node = $.ui.fancytree.getNode(e),
			   $input = $(e.target);
			e.stopPropagation();  // prevent fancytree activate for this row
			// if($input.is(":checked")){
			// 	alert("like " + $input.val());
			// }else{
			// 	alert("dislike " + $input.val());
			// }
		});
		var tree = $.ui.fancytree.getTree("#tree");

		/*
		 * Event handlers for our little demo interface
		 */
		$("input[name=search]").on("keyup", function(e){
			var match = $(this).val();
			if(e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === ""){
				$("#btnResetSearch").click();
				return;
			}
			// Pass text as filter string (will be matched as substring in the node title)
			var n = tree.filterNodes(match);
			$("#btnResetSearch").attr("disabled", false);
			$("span#matches").text("(" + n + " matches)");
		}).focus();

		$("#btnResetSearch").click(function(e){
			$("input[name=search]").val("");
			$("span#matches").text("");
			tree.clearFilter();
		}).attr("disabled", true);

		$("input#hideMode").change(function(e){
			tree.options.filter.mode = $(this).is(":checked") ? "hide" : "dimm";
			tree.clearFilter();
			$("input[name=search]").keyup();
//			tree.render();
		});

		$("#btnRename").click(function(e){
			var node = tree.getActiveNode();
			node.setTitle(node.title + "-renamed");
		});
		$("#btnAddChild").click(function(e){
			var node = tree.getActiveNode();
			node.addChildren([{title: "sub 1"}]);
		});
		$("#btnRemoveIcon").click(function(e){
			var node = tree.getActiveNode();
			node.icon = false;
			// node.render();
			node.renderTitle();
		});
		$("#btnToggleSelect").click(function(e){
			var node = tree.getActiveNode();
			node.toggleSelected();
		});
		$("#btnRemove").click(function(e){
			var node = tree.getActiveNode();
			node.remove();
			// node.render();
			//node.renderTitle();
		});
	});
</script>
</head>

<body class="example">
	<h1>Example: 'table' extension</h1>
	<div class="description">
		<p>
			Render a tree as a table (aka 'treegrid').
		</p>
		<p>
			<b>Status</b>: beta
		</p>
	</div>

	<div>
		<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
	</div>
	<p>
		<label>Filter:</label>
		<input name="search" placeholder="Filter...">
		<button id="btnResetSearch">&times;</button>
		<span id="matches"></span>
	</p>
	<p>
		<label for="hideMode">
			<input type="checkbox" id="hideMode">
			Hide unmatched nodes
		</label>
	</p>

	<p>
		<button id="btnRename">Rename</button>
		<button id="btnAddChild">Add Child</button>
		<button id="btnRemoveIcon">Remove icon</button>
		<button id="btnToggleSelect">Select</button>
		<button id="btnRemove">Remove</button>
	</p>
	<!-- Add a <table> element where the tree should appear: -->
	<table id="tree">
		<colgroup>
		<col width="30px"></col>
		<col width="30px"></col>
		<col width="*"></col>
		<col width="50px"></col>
		<col width="30px"></col>
		</colgroup>
		<thead>
			<tr> <th>#</th> <th></th> <th></th> <th>Ed1</th> <th>Ed2</th> <th>Rb1</th> <th>Rb2</th> </tr>
		</thead>
		<tbody>
		</tbody>
	</table>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="index.html">Example Browser</a>
		<a href="#" id="codeExample">View source code</a>
	</p>
	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
	<!-- End_Exclude -->
</body>
</html>
